<template>
  <div class="footer">
    <p>
      合计:&nbsp;<span>{{ listData.length }}</span>
    </p>
    <a @click="reset" href="#">清空任务</a>
  </div>
</template>
<script >
export default {
  data() {
    return {};
  },
  props: {
    listData: Array,
  },
  components: {},
  created() {},
  mounted() {},
  methods: {
    reset() {
      this.$emit("clear");
    },
  },
};
</script>
<style lang='less' scoped>
.footer {
  color: #ccc;

  padding: 0 15px;
  display: flex;
  justify-content: space-between;

  span {
    color: orange;
  }

  a {
    text-decoration: none;
    color: #ccc;
  }
}
</style>  